<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <style type="text/css">

    </style>
</head>

<body>

<!-- 头部 -->
<div class="header">
    <div class="logo">
        <img src="img/logo.png" alt="logo.png">
    </div>
    <div class="nav">
        <ul>
            <li>
                <a href="#">手记</a>
            </li>
            <li>
                <a href="#">手记</a>
            </li>
            <li>
                <a href="#">手记</a>
            </li>
            <li>
                <a href="#">手记</a>
            </li>
        </ul>
    </div>
</div>

<!-- 主体 -->
<div class="banner">
    <div class="top">
        <img src="img/banner3.jpg" alt="">
    </div>
    <!-- 遮罩层 -->
    <div class="topLayer">

    </div>
    <!-- 最上层的内容 -->
    <div class="topLayer-top">

        <div class="input">
            <input type="text" class="s_ipt" name="wd" id="kw1" maxlength="100" autocomplete="off"
                   placeholder="请在这里输入用户名"><br/>
        </div>
        <div class="input">
            <input type="text" class="s_ipt" name="wd" id="kw2" maxlength="100" autocomplete="off"
                   placeholder="请在这里输入用户名"><br/>
        </div>
        <div class="input">
            <input type="text" class="s_ipt" name="wd" id="kw3" maxlength="100" autocomplete="off"
                   placeholder="请在这里输入用户名"><br/>
        </div>
        <div class="input2">
            <input type="text" class="s_ipt" name="wd" id="kw4" maxlength="100" autocomplete="off"
                   placeholder="请在这里输入用户名"><br/>
        </div>
        <div class="send-message">
            SEND&nbsp;MESSAGE
        </div>

    </div>

</div>

<div class="description container">
    <h1 class="">ABOUT</h1>
    <div style="height: 3px;width: 30px;background:#07CBC9 ;margin: 0 auto;">

    </div>
    <p>"I want to give good things to record down,<br>after the recall will be very beautiful,<br>after the recall will
        be very beautiful."</p>

</div>

<div class="content container ">

    <div class="left ">
        <div class="title">
            <h2 class="">A WORD <br/>ABOUT US</h2>
        </div>
        <div class="content2 ">

        </div>
        <div class="content1 ">
            <p>"I want to give good things to record down,<br>after the recall will be very beautiful,<br>after the
                recall will be very beautiful."</p>

            <div class="button">explore</div>
        </div>

    </div>
    <div class="middle">
        <img src="img/bb3.jpg"/>
    </div>
    <div class="right">

        <div class="description2 ">
            <h1 class="">7000</h1>
            <div style="height: 3px;width: 30px;background:#07CBC9 ;margin: 0 auto;">

            </div>
            <p>student</p>

        </div>
        <div class="description2 ">
            <h1 class="">ABOUT</h1>
            <div style="height: 3px;width: 30px;background:#07CBC9 ;margin: 0 auto;">

            </div>
            <p>student</p>

        </div>

    </div>

</div>
<div class="table">
    <div class="item">
        <img class="pic" src="img/b1.jpg"/>
        <div class="jiao-left">

        </div>
    </div>
    <div class="item2">
        <div class="pic-text">
            <h1>Library</h1><br/>
            <h3>Advocates seek to focus investment on proven, sustainable technologies to help move the country away
                from its dependency on fossil fuels.</h3>
            <br/>
            <p>Advocates seek to focus investment on proven, sustainable technologies to help move the country away from
                its dependency on fossil fuels.</p>

        </div>
        <div class="button">EXPLORE</div>
    </div>
    <div class="item">
        <img class="pic" src="img/b1.jpg"/>
        <div class="jiao-left">

        </div>
    </div>
    <div class="item2">
        <div class="pic-text">
            <h1>Library</h1><br/>
            <h3>Advocates seek to focus investment on proven, sustainable technologies to help move the country away
                from its dependency on fossil fuels.</h3>
            <br/>
            <p>Advocates seek to focus investment on proven, sustainable technologies to help move the country away from
                its dependency on fossil fuels.</p>

        </div>
        <div class="button">EXPLORE</div>
    </div>
    <div class="item2">
        <div class="pic-text">
            <h1>Library</h1><br/>
            <h3>Advocates seek to focus investment on proven, sustainable technologies to help move the country away
                from its dependency on fossil fuels.</h3>
            <br/>
            <p>Advocates seek to focus investment on proven, sustainable technologies to help move the country away from
                its dependency on fossil fuels.</p>

        </div>
        <div class="button">EXPLORE</div>
    </div>
    <div class="item">
        <img class="pic" src="img/b1.jpg"/>
        <div class="jiao-right">

        </div>
    </div>
    <div class="item2">
        <div class="pic-text">
            <h1>Library</h1><br/>
            <h3>Advocates seek to focus investment on proven, sustainable technologies to help move the country away
                from its dependency on fossil fuels.</h3>
            <br/>
            <p>Advocates seek to focus investment on proven, sustainable technologies to help move the country away from
                its dependency on fossil fuels.</p>

        </div>
        <div class="button">EXPLORE</div>
    </div>
    <div class="item">
        <img class="pic" src="img/b1.jpg"/>
        <div class="jiao-right">

        </div>
    </div>

    <div class="clear">

    </div>

</div>

<div class="description container">
    <h1 class="">ABOUT</h1>
    <div style="height: 3px;width: 30px;background:#07CBC9 ;margin: 0 auto;">

    </div>
    <p>"I want to give good things to record down,<br>after the recall will be very beautiful,<br>after the recall will
        be very beautiful."</p>

</div>
<style type="text/css">
    .gallery {
        height: 670px;
    }

    .gallery .pic-item {
        width: 319px;
        float: left;
        height: 280px;
        background: black;
        margin-right: 21px;
        margin-bottom: 20px;
    }

    .gallery :nth-child(3n) {
        margin-right: 0px;
    }

    .gallery .pic-item img {
        width: 319px;
        height: 240px;
    }

    .gallery .pic-item span {
        line-height: 30px;
        margin: 20px;
        color: white;
    }
</style>
<div class="gallery container ">
    <div class="pic-item">
        <img src="img/03-01.jpg"/>
        <span>kfjaksdfj</span>

    </div>
    <div class="pic-item">
        <img src="img/03-01.jpg"/>
        <span>kfjaksdfj</span>
    </div>
    <div class="pic-item">
        <img src="img/03-01.jpg"/>
        <span>kfjaksdfj</span>
    </div>
    <div class="pic-item">
        <img src="img/03-01.jpg"/>
        <span>kfjaksdfj</span>
    </div>
    <div class="pic-item">
        <img src="img/03-01.jpg"/>
        <span>kfjaksdfj</span>
    </div>
    <div class="pic-item">
        <img src="img/03-01.jpg"/>
        <span>kfjaksdfj</span>
    </div>

</div>

<div class="footer clear">
    © 2016 imooc.com 京ICP备13046642号
</div>

</body>

</html>